[제이쿼리] 비동기식 호출 ajax() 메소드 알아보기

요즘의 웹에서 비동기 방식의 ajax 호출이 웹환경에서의 꽃이라 할만큼 중요한 부분을 차지합니다. 그만큼 비동기 방식의 통신이 많이 사용되고 반드시 필요하기 때문이죠. 제이쿼리에서 ajax를 사용한 비동기 방식에 대하여 간단하게 알아보고 어떻게 사용하는지 아래에서 알아보겠습니다.

# ajax란 무엇이고 장점은?

먼저 ajax에 대하여 알아보겠습니다. ajax를 설명하자면... 동기 방식과 달리 페이지 전체를 다시 불러오지 않고 필요한 부분 일부만 호출하여 웹사이트에 반영하는 기술입니다. 이런 비동기 방식을 사용하면 다음과 같은 장점이 있습니다.

! ajax 비동기 방식의 장점 보기

비동기 방식의 장점은 무엇인지 알아봅니다. 간단하게 아래와 같은 장점이 있습니다.

1. 일부만 불러오므로 호출시간과 페이지 로딩 시간이 짧다
2. 모든 자원을 다시 불러올 필요가 없으므로 리소스 관리가 우수하며 낭비가 적다.
3. JSONP등을 사용한 크로스도메인이 가능하다.
4. 페이지 리로딩 할 경우 입력 양식의 내용이 사라지는 문제를 제거할 수 있다.


위에 언급한 내용이 가장 큰 이유라고 할 수 있습니다. 비동기식을 사용하는 방법은 몇가지가 있는데 XHR(XMLHttpRequest)의 자바스크립트 함수를 사용하는 방법이 있고 제이쿼리(jQuery)에서 제공하는 ajax() 메소드나 getJSON() 메소드등이 있습니다. 이중에서도 가장 많이 쓰이는 ajax()에 대하여 알아보겠습니다. 먼저 간단한 사용방법입니다.

$.ajax({ type: ..., url: ..., dataType: ...; })


위와 같이 인자 값으로 아래의 속성값을 사용할 수 있습니다.

• 1. type : get, post 등의 전송 방식을 결정
• 2. url : 접근할 url을 입력
• 3. data: 전달할 파라미터 값을 설정
• 4. dataType : 파싱할 파일 형태를 입력(Ex. json, html, xml)
• 5. success : 성공할 경우 불러올 콜백함수, 반환되는 코드(html, xml 등등)를 사용가능
• 6. error : 실패할 경우 불러올 콜백함수
• 7. complete : 성공 또는 실패 뒤에 실행할 콜백함수
• 8. jsoncallback : 성공시 불러올 함수

위와 같습니다. 그럼 아래 예제를 참고하시기 바랍니다.

# ajax() 메소드 예제소스 코드보기

아래 예제는 get 방식으로 특정 API 주소와 통신하는 예제코드입니다.

간단한 ajax 콜 예제를 먼저 살펴보겠습니다. 반드시 필요한 값들만 사용하였습니다.

전달할 서버 주소와 성공시 수행할 코드만 적혀있습니다. 메소드는 기본값 GET이 사용됩니다.

다음으로는 데이터(data)를 서버에 함께 전달하는 ajax 예제입니다.

참고로 페이지내에서 ajax()를 다수 호출하는 경우라면 이에 필요한 설정을 통합 관리하는 것이 유리할 수 있습니다. ajaxSetup() 메소드를 사용하면 필요한 옵션들을 함께 관리할 수 있어 매우 편리합니다. 위 예제는 jquery()의 ajax() 메소드를 사용한 방법으로 이 외에도 다양한 축약 메소드(method) 역시 존재하나 가장 많이 사용되는 것이 바로 ajax() 메소드입니다.